<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-购物车案例</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1.准备一个div容器-->
<div id="app">
    <table border="1" cellspacing="0" width="100%" cellpadding="0">
        <caption style="font-size: 50px"><b>我的购物车</b></caption>
        <!--表头-->
        <tr>
            <th>
                <!--全选-->
                <input type="checkbox" v-model="isSelectAll">
            </th>
            <th>编号</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        <!--数据行-->
        <tr align="center" v-for="(item,index) in goodsList">
            <th>
                <input type="checkbox" v-model="item.flag" @change="getTotalMoney()">
            </th>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="reduceBuyNum(index)">-</button>
                {{item.buyNum}}
                <button @click="addBuyNum(index)">+</button>
            </td>
            <td>{{item.count}}</td>
            <td>{{item.description}}</td>
            <td>
                <button @click="deleteOneRow(index)">删除</button>
            </td>
        </tr>
        <tr align="right">
            <td colspan="11">
                应付:{{totalMoney}}
                <button>结算</button>
            </td>
        </tr>
    </table>
</div>
<script>
    <!--2.准备一个Vue对象和容器绑定-->
    const vm = new Vue({
        el: "#app",
        data: {
            goodsList: [
                {id: "1", name: "小霸王1", price: 200.00, buyNum: 1, count: 200.00, description: "牛批", flag: false},
                {id: "2", name: "小霸王2", price: 300.00, buyNum: 1, count: 300.00, description: "牛批", flag: false},
                {id: "3", name: "小霸王3", price: 200.00, buyNum: 1, count: 200.00, description: "牛批", flag: false},
                {id: "4", name: "小霸王4", price: 100.00, buyNum: 1, count: 100.00, description: "牛批", flag: false},
                {id: "5", name: "小霸王5", price: 50.00, buyNum: 1, count: 50.00, description: "牛批", flag: false},
                {id: "6", name: "小霸王6", price: 10.00, buyNum: 1, count: 10.00, description: "牛批", flag: false},
            ],
            // 全选
            isSelectAll: false,
            // 应付金额
            totalMoney: undefined,
        },
        // 方法
        methods: {
            // 求购物车总金额
            getTotalMoney: function () {
                let sum = 0;
                // 判断是否勾选中
                this.goodsList.map(item => {
                    if (item.flag == true) {
                        sum = sum + item.count;
                    }
                });
                this.totalMoney = sum;
            },
            // 删除一行
            deleteOneRow: function (index) {
                this.goodsList.splice(index, 1);
                this.getTotalMoney();
            },
            // 购买数量加1
            addBuyNum: function (index) {
                let item = this.goodsList[index];
                item.buyNum++;
                // 重新结算小计
                item.count = item.price * item.buyNum;
                // 重新计算总金额
                this.getTotalMoney();
            },
            // 购买数量减1
            reduceBuyNum: function (index) {
                let item = this.goodsList[index];
                item.buyNum--;
                if (item.buyNum==0){
                    this.deleteOneRow(index);
                }else {
                    item.count = item.price * item.buyNum;
                    this.getTotalMoney();
                }
            }
        },
        // 局部过滤器
        filters: {},
        // 监听器
        watch: {
            // 监听全选按钮
            isSelectAll: function (newValue, oldValue) {
                this.goodsList.map(item => item.flag = this.isSelectAll);
                this.getTotalMoney();
            }
        },
    });
</script>
</body>
</html>